<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>同城活动</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
	<style>
		body{
			font-family: "Microsoft YaHei", sans-serif;
			min-height:100vh;
			background: #fff;
		}
		.header{
			background: #43ac45;
			z-index: 100000;
		}
		.header h1{
			color:#fff;
			font-size:18px;
		}
		.header a{
			color:#fff;
		}
		a:active{
			color:#333;
		}
		ul li{
			list-style-type: none;
		}
		.section{
			margin-top:44px;
		}
		.section .sel_list{
			height:46px;
			line-height:46px;
			width:100%;
			text-align:center;
			margin:0;
			padding:0;
			/*border-bottom:1px solid #f2f2f2;*/
			font-size:15px;
		}
		.section .sel_list>li{
			float:left;
			width:calc(100%/3);
		}
		.sel_list a{
			display: inline-block;
			width: 100%;
		}
		.sel_list a b{
			display: inline-block;
			margin-left:9px;
			border-color: #333 #fff #fff #fff;
			border-style: solid;
			border-width: 7px 5px 0 5px;
			height: 0;
			width: 0;
		}
		.content ul{
			margin:0;
			padding:0;
			min-height: 100vh;
		}
		#main>li{
			height:110px;
			width:100%;
			overflow: hidden;
			padding:22px 12px 12px;
			border-bottom:1px solid #f2f2f2;
			position: relative;
		}
		.content ul li .view {
			float: left;
			width: 30%;
			height: 100%;
			position:relative;
		}
		.content  ul li .view #end p{
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0.5;
			border-radius: 3px;
			background: #000;
			width: 100%;
			height: 100%;
		}
		.content  ul li .view>#icon{
			position:absolute;
			top:0;
			left:0;
			width: 24%;
			height: 30%;
			z-index: 100;
			top: 0;
			left: 0;
			background-size: 30%;
		}
		#end{
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0;
			z-index:120;

		}
		.c0{
			display: none;
		}
		.c1{
			display: block;
		}
		.c2{
			display: none;
		}
		.content ul li .view span{
			color:#fff;
			opacity: 0.7;
			font-size:16px;
			display: inline-block;
			width:100%;
			position:absolute;
			top:30%;
			text-align: center;
			z-index: 10;

		}
		.content  ul li .address{
			float:left;
			width:70%;
			/*height:100%;*/
			padding-left:3%;
			overflow: hidden;

		}
		.view img:first-child{
			width:100%;
			height:100%;
			border-radius: 3px;
			vertical-align: middle;
		}
		.address ul{
			height:100%;
		}
		.content ul li .address ul li{
			font-size:13px;
			color:#999;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp:1;
			overflow: hidden;
		}
		.content ul li .address>ul>li:first-child{
			font-size:16px;
			padding-top:0;
			color:#333;
			/*font-size:54px;*/
		}
		.address ul li:last-child{
			font-size:11px;
			text-align:right;
			float:right;
			width: 100%;
			height: 100%;
		}
		.active{
			border-bottom:1px solid #ffb812;
			color:#ffb812;
		}
		.noactive{
			border-bottom:1px solid #f2f2f2;
			color:#333;
		}
		/*活动类型*/
		.sel_list{
			position:relative;
		}
		#mold{
			position:absolute;
			top:47px;
			right:0;
			width:100%;
			min-height:100vh;
			z-index: 130;
			background:rgba(0,0,0,.4);
			text-align: left;
		}
		#mold p{
			margin:0;
			background: #fff;
			padding:0 2%;
		}
		#mold span{
			width:calc(79%/4);
			margin:12px 2%;
			padding:0;
			background: #f2f2f2;
			color:#333;
			border-radius: 3px;
			height:37px;
			line-height:37px;
			display: inline-block;
			font-size:15px;
			text-align: center;
		}
		/*置顶活动*/
		.hot{
			display:inline-block;
			width:21px;
			height:21px;
			background: url("../../images/city_life/hot.png") no-repeat 0px 1px;
			background-size: 75%;
			vertical-align: middle;
		}
		/*类型*/
		.hide{
			display: none;
		}
		.visible{
			display: block;
		}
		/*小三角*/



		.title{
			font-size:50px;
		}


		.mui-scroll-wrapper {
		    position: absolute;
		    z-index: 2;
		    top:0px;
		    bottom: 0;
		    left: 0;
		    overflow: hidden;
		    width: 100%;
		}

		/*没有内容时*/
		#nosee{
			background: url(../../images/my/index/null.png) no-repeat 0 55%;
    		background-size: 100%;
			margin: 0 28%;
			min-height:100vh;
			overflow-x: hidden;
			position:relative;
			top:0;
			z-index: 150;
			display: none;
		}
		
	</style>
</head>
<body>
<header class="mui-bar mui-bar-nav header">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">同城活动</h1>
</header>
<div class="section">
	<ul class="sel_list" style='position:fixed;top:44px;z-index: 100000;background: #fff;'>
		<li><a class="active" id='newest'>最新</a></li>
		<li><a class="noactive" id='hottest'>最热</a></li>
		<li>
			<a class="noactive">类型<b></b></a>
			<div id="mold" class='hide'>
				<p>
					<span id="1">运动</span>
					<span id="2">音乐</span>
					<span id="3">教育</span>
					<span id="4">旅游</span>
				</p>
				<p>
					<span id="5">美食</span>
					<span id="6">娱乐</span>
					<span id="7">展会</span>
					<span id="8">亲子</span>
				</p>
				<p>
					<span id="9">休闲</span>
				</p>
			</div>
		</li>
	</ul>
	<p id="nosee"></p>
	<div id="pullrefresh" style='margin-top:90px;' class='content mui-content mui-scroll-wrapper'>
		<div class="mui-scroll">
			<ul id="main" class="mui-table-view mui-table-view-chevron" >
				<!--<li>
				<div class="view">
					<img src="../../images/ce1.jpg" alt="">
					<p></p>
				</div>
				<div class="address">
					<ul>
						<li>五一相约深山沟农场</li>
						<li>时间：2016.05.01-2016.06.01</li>
						<li>地点：燕山路72号（燕山宾馆旁边）</li>
						<li><span class="hot"></span>2017-01-06</li>
					</ul>
				</div>
			</li>
			-->
			</ul>
		</div>
	</div>
</div>

<script src="../../plugins/mui/mui.min.js"></script>
<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
<script src="../../js/getApiToken.js"></script>
<script src="../../js/md5.js"></script>
<script>
	var page_cnt=12;
	var ht='没有更多数据了'
	var this_tag;
	mui.init({
		pullRefresh:{
			//上拉加载
			container:"#pullrefresh",
			up:{
				height:50,
				auto:false,
				contentrefresh:"正在加载...",
				contentnomore:ht,
				callback:function pullfresh(){
					if(true){
						if(this_t=='最新'){
							console.log(this_t);
							myAjax('home/Activity/getMoreList','get',{page_cnt:page_cnt,type:1},
									function(data){
										console.log(JSON.stringify(data))
										for(var i in data){
											console.log(Object.keys(data).length);
											console.log(Object.keys(data).filter(key=>!isNaN(+key)).length);//去除success为true那个字段
											if(data[i]!=true){
												var ye_html=s_html(data[i].id,data[i].path,data[i].icon,data[i].is_end,data[i].name,data[i].start_time,data[i].address,data[i].create_time,data[i].sort);
												$('#main').append(ye_html);
											}
										}
										if(Object.keys(data).filter(key=>!isNaN(+key)).length<page_cnt){
											mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
										}else{
											mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
										}
									}
							)
						}else if(this_t=='最热'){
							console.log(this_t);
							myAjax('home/Activity/getMoreList','get',{page_cnt:page_cnt,type:2},
									function(data){
										console.log(JSON.stringify(data))
										for(var i in data){
											console.log(Object.keys(data).length);
											console.log(Object.keys(data).filter(key=>!isNaN(+key)).length);//去除success为true那个字段
											if(data[i]!=true){
												var h_html=s_html(data[i].id,data[i].path,data[i].icon,data[i].is_end,data[i].name,data[i].start_time,data[i].address,data[i].create_time,data[i].sort);
												$('#main').append(h_html);
											}
										}
										if(Object.keys(data).filter(key=>!isNaN(+key)).length<page_cnt){
											mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
										}else{
											mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
										}
									}
							)
						}else if(this_t=='类型'){
							//类型加载
							$('#main').html('');
							console.log('shi')
							
							myAjax('home/Activity/getTagList','get',{'tag': this_tag,'page_cnt':page_cnt},
								function (data) {
									if (data.success) {
										//最新===数据
										for (var i in data) {
											if(data[i]!=true){
												var tag_html=s_html(data[i].id,data[i].path,data[i].icon,data[i].is_end,data[i].name,data[i].start_time,data[i].address,data[i].create_time,data[i].sort);
												$('#main').append(tag_html);
											}else if (JSON.stringify(data) == '{"success":true}') {
												console.log('....');
												//没有当前类型数据
												if (data[i].name == undefined) {
													$("#nosee").css('display', 'block');
													$('#main').html('');
												} else {
													$("#nosee").css('display', 'none');
													$('#main').html(tags_html);
												}
											}
										}
										if(Object.keys(data).filter(key=>!isNaN(+key)).length<page_cnt){
											mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
										}else{
											mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
										}
									}
								}
							)
						}

					}
				}
			}
		}
	});
	var this_t='最新';
	var isAdd=true;//还有数据
	var isAjax=false;
	mui.plusReady(function(){
		//数据交互
		myAjax('home/Activity/getActivityList','get',{},
				function (data) {
					if (data.success) {
						//输出一下测试
						console.log(JSON.stringify(data));
						console.log('..')
						//最新===数据
						for (var i = 0; i < data.news.length; i++) {
							if(data.news.length>0){
								$("#nosee").css('display', 'none');
								var news_html=s_html(data.news[i].id,data.news[i].path,data.news[i].icon,data.news[i].is_end,data.news[i].name,data.news[i].start_time,data.news[i].address,data.news[i].create_time,data.news[i].sort);
								$('#main').append(news_html);
							}else{
								$("#nosee").css('display', 'block');
							}
						}
						if(data.news.length<page_cnt){
							mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
						}else {
							mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
						}
					}
				}
		)
		//列表获取ajax
		$('#pullrefresh').on('tap','.li',function(e){
			var tag_id=$(this).attr('id');
			console.log(tag_id);
			mui.openWindow({
				url:'activity_apply.html',
				id:tag_id,
				extra:{
					id:tag_id,
				},
				waiting:{
					autoShow:true,//自动显示等待框，默认为true
					title:'正在加载...',//等待对话框上显示的提示内容
				},
				show:{
					autoShow:true,
					aniShow:'fade-in'
				},
				extras:{
					type:0
				}
			})
		});
		//类型
		$('.sel_list').on('tap','li:last-child a',function(){
			if($('#mold').attr('class')=='hide'){
				$('#mold').removeClass('hide').addClass('visible');
				$('li:last-child a b').css({
					'border-width':'0px 5px 7px 5px',
					'border-color': '#fff #fff #333 #fff',
				});
			}else{
				$('#mold').removeClass('visible').addClass('hide');
				$('li:last-child a b').css({
					'border-width':'7px 5px 0px 5px',
					'border-color': '#333 #fff #fff #fff',
				});
			}
		})
		//点击切换，标题栏
		$('.sel_list').on('tap','li a',function(e){
			$('#main').html('');
			var cls_this=$(this).attr('class');
			var last_li=$('li:last-child a').text();
			if(cls_this=='noactive'){
				$(this).parent().siblings().children().removeClass('active').addClass('noactive');
				$(this).removeClass('noactive').addClass('active');
				if($(this).text()!=last_li){
					$('#mold').removeClass('visible').addClass('hide').removeClass('noactive');
					$('li:last-child a').html('类型'+'<b></b>');
					$('li:last-child a b').css({
						'border-width':'7px 5px 0px 5px',
						'border-color': '#333 #fff #fff #fff',
					});
				}else{
					$('#mold').removeClass('hide').addClass('visible');
					$('li:last-child a b').css({
						'border-width':'0px 5px 7px 5px',
						'border-color': '#fff #fff #333 #fff',
					});
				}
			}
			if($(this).text()=='最热'){
				console.log('这是切换过来的===最热')
				this_t=$(this).text();
				$("#nosee").css('display', 'none');
				$('#main').html('');
				myAjax('home/Activity/getActivityList','get',{},
						function (data) {
							if (data.success) {
								$('#main').html('');
								console.log(data.hots.length);
//								mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
								//输出一下测试
								console.log(JSON.stringify(data));
								//最新===数据
								for (var i = 0; i < data.hots.length; i++) {
									if(data.hots.length>0){
										var hots_html=s_html(data.hots[i].id,data.hots[i].path,data.hots[i].icon,data.hots[i].is_end,data.hots[i].name,data.hots[i].start_time,data.hots[i].address,data.hots[i].create_time,data.hots[i].sort);
										$('#main').append(hots_html);
									}else{
										$("#nosee").css('display', 'block');
									}
								}
								if(data.hots.length<page_cnt){
									mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
								}else {
									mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
								}
							}
						}
				)
			}else if($(this).text()=='最新'){
				$("#nosee").css('display', 'none');
				$('#main').html('');
				this_t=$(this).text();
//					mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
				myAjax('home/Activity/getActivityList','get',{},
						function (data) {
							if (data.success) {
								console.log(data.news.length);
								console.log('///最新切换')
								//输出一下测试
								console.log(JSON.stringify(data));
								//最新===数据
								for (var i = 0; i < data.news.length; i++) {
									if(data.news.length>0){

										var news_html=s_html(data.news[i].id,data.news[i].path,data.news[i].icon,data.news[i].is_end,data.news[i].name,data.news[i].start_time,data.news[i].address,data.news[i].create_time,data.news[i].sort);
										$('#main').append(news_html);
									}else{
										$("#nosee").css('display', 'block');
									}

								}
								if(data.news.length<page_cnt){
									mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
								}else {
									mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
								}
							}
						}
				)
			}else if($(this).text()=='类型'){
				$('#main').html('');
				this_t=$(this).text();
				//选择类型
				$('.sel_list').on('tap','#mold p span',function(e){
					$("#nosee").css('display', 'none');
					var text=$(this).text();
					console.log(text);
					$('li:last-child a').html(text+'<b></b>');
					$('#mold').removeClass('visible').addClass('hide');
					this_tag = $(this).attr('id');
					myAjax('home/Activity/getTagList','get',{'tag': this_tag,'page_cnt':page_cnt},
							function (data) {
								if (data.success) {
									$('#main').html('');
									//最新===数据
									for (var i in data) {
										if(data[i]!=true){
											var tag_html=s_html(data[i].id,data[i].path,data[i].icon,data[i].is_end,data[i].name,data[i].start_time,data[i].address,data[i].create_time,data[i].sort);
											$('#main').append(tag_html);
										}else if (JSON.stringify(data) == '{"success":true}') {
											console.log('....');
											//没有当前类型数据
											if (data[i].name == undefined) {
												$("#nosee").css('display', 'block');
												$('#main').html('');
											} else {
												$("#nosee").css('display', 'none');
												$('#main').html(tags_html);
											}
										}
									}
									if(Object.keys(data).filter(key=>!isNaN(+key)).length<page_cnt){
										mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
									}else {
										mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
									}
								}
							}
					)
				});
			}
			//切换标题栏点击事件====结束
		});
	})

	//页面函数
	function s_html(id,path,icon,is_end,name,start_time,address,create_time,sort){
		//判断置顶
		if(sort==0){
			var c='<li>' +create_time+ '</li>'
		}else{
			var c='<li>' + '<span class="hot">' + '</span>' + create_time+ '</li>'
		}
		return '<li id="' +id+ '" class="li">' +
				'<div class="view">' +
				'<img src="' +_baseUrl+path + '" alt="">' +
				'<img src="' +_baseUrl+ icon + '" alt="" id="icon" style="position:absolute;left:0;top:0;">' +
				'<div id="end" class="c' +is_end + '">' +
				'<p>' + '</p>' +
				'<span>' + '已结束' + '</span>' +
				'</div>' +
				'</div>' +
				'<div class="address">' +
				'<ul>' +
				'<li>' +name + '</li>' +
				'<li>' + '时间：' + start_time + '</li>' +
				'<li>' + '地点：' +address + '</li>' +
				c +
				'</ul>' +
				'</div>' +
				'</li>';
	}

</script>
</body>
</html>
